<script lang="ts" setup>
import { ref, reactive } from "vue";
import queryUserServiceApi from "@/api/modules/org/query/query-user";
import { useUserStore } from "@/stores/modules/user";
import { UserEditUrl, UserAddUrl } from "@/views/org/mapping.json";
import { jumpPath } from "@/utils/router-kit";
import { useJxtechPageTableExt } from "@/comp-ext";
import { JxtechPageTableColumn } from "@whjxtech/jxtech-component";
const UserListTableRef = ref();
const { getSelectionPkList, getSelectionData } = useJxtechPageTableExt(UserListTableRef);
const userStore = useUserStore();

const props = defineProps({
  queryParam: Object
});

const UserTableState = reactive({
  queryColumn: [{ name: "likeAll", type: "input", label: "用户账号/用户名称" }],
  /**查询参数 */
  queryParam: { likeAll: null, id: userStore.orgId, subOrgId: userStore.subOrgId },
  /**
   * 表格的列配置
   */
  tableColumn: [
    { label: "序号", width: "50", type: "selection" },
    { label: "序号", width: "50", type: "index" },
    {
      prop: "userAccount",
      label: "用户账号",
      width: "180",
      //   sort: { sortable: 'custom' },
      type: "link",
      linkClick: (row: any) => jumpPath(UserEditUrl + row.userId + "?unitId=" + props.queryParam?.unitId)
    },
    { prop: "userFullname", label: "用户名称" },
    { prop: "unitName", label: "部门名称" },
    { prop: "main", label: "主要部门", slot: "mainSlot" },
    { prop: "valid", label: "是否有效", slot: "validSlot" },
    { prop: "userAccountLocked", label: "是否锁定", slot: "userAccountLockedSlot" }
  ] as JxtechPageTableColumn[],
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) =>
    queryUserServiceApi.queryPage(
      { queryName: "userList" },
      { ...props.queryParam, ...params, ...UserTableState.queryParam, refCols: "default" }
    ),
  /**
   * 表格导出excel的方法
   */
  expData: (params: any) =>
    queryUserServiceApi.exportData(
      { queryName: "userList", refCols: "default" },
      { ...props.queryParam, ...params, ...UserTableState.queryParam }
    ),
  //新增数据方法
  onAddButtonClick: () => {
    jumpPath(UserAddUrl, { unitId: props.queryParam?.unitId });
  },
  /**
   * 表格删除事件
   */
  deleteTableData: () => {
    //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
    //deletePageTableSelectionDataList(UserListTableRef, dictionaryTypeApi);
  },

  /**
   * 查询事件
   */
  handleSearch: () => UserListTableRef.value.loadTable()
});

defineExpose({
  getUserListTableRef: () => UserListTableRef.value,
  onDeleteButtonClick: () => UserTableState.deleteTableData(),
  onAddButtonClick: () => UserTableState.onAddButtonClick(),
  selectionPkList: () => getSelectionPkList(),
  selectionListData: () => getSelectionData()
});
</script>
<template>
  <jxtech-basic-card title="用户信息">
    <template #operationSpace>
      <jxtech-search-input
        tips="用户账号/用户名称"
        v-model="UserTableState.queryParam.likeAll"
        @search="UserTableState.handleSearch"
      >
      </jxtech-search-input>
    </template>
    <JxtechPageTableExt
      ref="UserListTableRef"
      row-key="userId"
      table-height="calc(100vh - 234px)"
      :table-column="UserTableState.tableColumn"
      :load-data="UserTableState.loadData"
      :exp-data="UserTableState.expData"
    >
      <template #mainSlot="{ row }">
        <el-checkbox v-model="row.main" true-label="Y" false-label="N" disabled></el-checkbox>
      </template>
      <template #validSlot="{ row }">
        <el-checkbox v-model="row.valid" true-label="Y" false-label="N" disabled></el-checkbox>
      </template>
      <template #userAccountLockedSlot="{ row }">
        <el-checkbox v-model="row.userAccountLocked" true-label="Y" false-label="N" disabled></el-checkbox>
      </template>
    </JxtechPageTableExt>
  </jxtech-basic-card>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: var(--el-checkbox-checked-bg-color);
  border-color: var(--el-checkbox-checked-input-border-color);
}
</style>
